define(['jquery', 'bootstrap', 'frontend', 'form', 'table', 'template', 'konva.min'], function ($, undefined, Frontend, Form, Table, Template, Konva) {
    var validatoroptions = {
        invalid: function (form, errors) {
            $.each(errors, function (i, j) {
                Layer.msg(j);
            });
        }
    };
    var Controller = {
        index: function () {
            var container = document.getElementById("container");
            var width = window.innerWidth;
            var height = window.innerHeight;
            // 1、创建舞台 Stage
            var stage = new Konva.Stage({
                container: 'container', // 设置容器的 id
                width: width, // 宽度
                height: height, // 高度
            });
            // 2、创建层 Layer
            var layer = new Konva.Layer();

            // 2.7、图片（渐变的图片）
            var imageObj010 = new Image();
            //imageObj010.src = 'http://fastaws.test/uploads/20200410/3c5b3237a3c40142666c9bfdefe8eb19.jpg'; // 图片的路径
            imageObj010.src = '/uploads/20200410/3c5b3237a3c40142666c9bfdefe8eb19.jpg';
            var image = new Konva.Image({
                x: 0,
                y: 0,
                image: imageObj010,
                width: 1000, // 宽度
                height: 500 // 高度
            });
            layer.add(image);

            var x = 0;
            var y = 0;
            // 2.4、创建矩形
            for (var i = 0; i < 10; i++) {
                x = 100 * i;
                for (var j = 0; j < 5; j++) {
                    y = 100 * j;
                    var rect = new Konva.Rect({
                        x: x,
                        y: y,
                        width: 100, // 宽度
                        height: 100, // 高度
                        fill: '', // 填充颜色
                        id: i + '-' + j,
                        stroke: 'black', // 描边颜色
                        strokeWidth: 0.1 // 边框的宽度
                    });
                    layer.add(rect);

                    var text = new Konva.Text({
                        x: x + 5,
                        y: y + 5,
                        text: i + "," + j,
                        fontSize: 11, // 默认值为12
                        fontFamily: 'Calibri', // 默认是Arial
                        fill: 'red'
                    });
                    layer.add(text);

                    //
                    rect.on('mouseover', function() {
                        document.body.style.cursor = 'pointer';
                    });
                }
            }

            layer.findOne('2-10');

            layer.batchDraw();
            // 将层添加至舞台容器中
            stage.add(layer);
            stage.batchDraw();

            // setup menu
            let currentShape;
            var menuNode = document.getElementById('menu');
            document.getElementById('pulse-button').addEventListener('click', () => {
                currentShape.to({
                    scaleX: 2,
                    scaleY: 2,
                    onFinish: () => {
                        currentShape.to({ scaleX: 1, scaleY: 1 });
                    },
                });
            });

            document.getElementById('delete-button').addEventListener('click', () => {
                currentShape.destroy();
                layer.draw();
            });

            window.addEventListener('click', () => {
                // hide menu
                menuNode.style.display = 'none';
            });

            stage.on('contextmenu', function (e) {
                // prevent default behavior
                e.evt.preventDefault();
                if (e.target === stage) {
                    // if we are on empty place of the stage we will do nothing
                    return;
                }
                currentShape = e.target;
                // show menu
                menuNode.style.display = 'initial';
                var containerRect = stage.container().getBoundingClientRect();
                menuNode.style.top =
                    containerRect.top + stage.getPointerPosition().y + 4 + 'px';
                menuNode.style.left =
                    containerRect.left + stage.getPointerPosition().x + 4 + 'px';
            });



        },
        api: {
            bindevent: function () {
                Form.api.bindevent($("form[role=form]"), function (data, ret) {
                    //console.log(ret);
                    setTimeout(function () {
                        location.href = ret.url ? ret.url : "/";
                    }, 1000);
                });
            }
        }
    };
    return Controller;
});